<template>
  <div class="code-and-review">
    <div class="review-con" id="reviewCon" ref="reviewCon">
      <component :is="curMenu" v-if="curMenu" />
    </div>
    <div class="code-con" id="moveBox" :class="!isExpand ? 'closeCodeCon': ''">
      <div class="move" v-move></div>
      <div class="expand" @click="isExpand = !isExpand" :style="{right: isExpand ? 0: '100%'}">
        <i :class="isExpand ? 'el-icon-arrow-left': 'el-icon-arrow-right'"></i>
      </div>
      <!-- 源码编辑器 -->
      <div class="coder-des-con">
        <coder :value="codeConfig" :language="language" ref="coder"></coder>
        <div class="markdown-con">
          <vue-markdown :source="mdDesc"></vue-markdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import coder from "./coder.vue";
import VueMarkdown from "vue-markdown";

export default {
  name: "CodeAndReview",

  components: {
    coder,
    VueMarkdown
  },

  props: {
    curMenu: String
  },
  directives: {
    //拖拽移动
    move(el, bindings) {
      el.onmousedown = function(e) {
        var init = e.clientX;
        var parent = document.getElementById("moveBox");
        var initWidth = parent.offsetWidth;
        document.onmousemove = function(e) {
          var end = e.clientX;
          var newWidth = end - init + initWidth;
          parent.style.width = newWidth + "px";
        };
        document.onmouseup = function() {
          document.onmousemove = document.onmouseup = null;
        };
      };
    }
  },
  data() {
    return {
      isExpand: true,
      mdDesc: "",
      codeConfig: "",
      language: "x-vue"
    };
  },

  watch: {
    curMenu: {
      handler(val) {
        try {
          this.curCode = "html";

          const codeConfig = require("@/document/" + val + "/codeConfig.js");
          this.codeConfig = codeConfig ? codeConfig.default : "";
          // 动态获取说明文件
          this.mdDesc = require("@/document/" + val + "/index.md");
        } catch (e) {
          console.log(e);
        }
      }
    }
  }
};

/***
 * 根据左边的菜单，获取相应的配置和组件
 */
</script>

<style lang="less" scoped>
.code-and-review {
  height: 100%;
  flex: 1;
  display: flex;

  .code-con {
    width: 900px;
    border-right: 1px solid #ebebeb;
    position: relative;
    transition: all 0.3s ease-in;
    .move {
      height: 100%;
      width: 10px;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      cursor: col-resize;
      z-index: 2;
    }
    &.closeCodeCon {
      width: 0 !important;
      background-color: transparent;
    }
    .expand {
      position: absolute;
      right: 0;
      top: 50%;
      background-color: #e2e5ea;
      width: 14px;
      height: 90px;
      margin-top: -45px;
      color: #0075c7;
      line-height: 90px;
      cursor: pointer;
      z-index: 3;
    }
    /deep/ .coder-des-con {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0px;
      overflow: auto;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      // flex-direction: column;

      .markdown-con{
        width: 50%;
        height: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 10px 10px 10px 15px;
      }

      .in-coder-panel {
        flex: 1;
        width: 50%;
      }
    }
  }

  .review-con {
    width: 100%;
    height: 100%;
    flex: 1;
  }
}
.code-btns {
  list-style: none;
  clear: both;
  margin: 0 0 10px 0;
  text-align: right;
  font-size: 14px;
  padding-left: 0;
  li {
    margin-left: 15px;
    cursor: pointer;
    &.operate-btn {
      float: right;
    }
    &.code-tab {
      float: left;
      border: 1px solid #ebebeb;
      width: 80px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      margin-left: 0;
      &.active {
        background-color: #0075c7;
        color: #fff;
      }
    }
    i {
      margin-right: 5px;
    }
    &:hover {
      color: #0075c7;
    }
  }
}
/deep/ pre > code {
  background-color: #f8f8f8;
  border-radius: 2px;
  color: #333;
  display: block;
  padding: 5px 10px;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  padding-right: 15px;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
  line-height: 23px;
}
/deep/ .coder-des-con li {
  line-height: 20px;
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}
</style>